<template>
  <h2>Child子级组件</h2>
  <h4>msg:{{msg}}</h4>
  <button @click="update">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'
export default defineComponent({
  name: 'Child',
  beforeCreate () {
    console.log('2.x beforeCreate')
  },
  created () {
    console.log('2.x created')
  },
  beforeMount () {
    console.log('2.x beforeMount')
  },
  mounted () {
    console.log('2.x mounted')
  },
  beforeUpdate () {
    console.log('2.x beforeUpdate')
  },
  updated () {
    console.log('2.x updated')
  },
  // v3中改名了
  // beforeDestroy () {
  //   console.log('2.x beforeDestroy')
  // },
  // destroyed () {
  //   console.log('2.x destroyed')
  // },
  beforeUnmount () {
    console.log('2.x beforeUnmount')
  },
  unmounted () {
    console.log('2.x unmounted')
  },
  setup () {
    console.log('3.0 setup')
    const msg = ref('abc')
    const update = () => {
      msg.value += '==='
    }
    onBeforeMount(() => {
      console.log('3.0 onBeforeMount')
    })
    onMounted(() => {
      console.log('3.0 onMounted')
    })
    onBeforeUpdate(() => {
      console.log('3.0 onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('3.0 onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('3.0 onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('3.0 onUnmounted')
    })
    return {
      msg,
      update
    }
  }
})
</script>
